<template>
	<div @click="$emit('click')" class="albumBox position-relative rounded-4" :style="{ '--boxSize': size + 'px' }">
		<div class="disk position-absolute" :style="{ backgroundImage: `url(${require('@/assets/img/coverall.png')})` }"></div>
		<div class="edges position-absolute">
			<div class="rounded-5"></div>
			<div class="rounded-5 mt-3"></div>
		</div>
		<img class="previewCover position-absolute" :class="bodyClass" :src="defaultArtistCover" />
		<img
			:class="`${loaded ? 'opacity-100' : 'opacity-0'} bodyClass`"
			@load="loaded = true"
			class="albumCover position-relative rounded-4 cursor-pointer"
			onerror="this.src='https://p1.music.126.net/jWE3OEZUlwdz0ARvyQ9wWw==/109951165474121408.jpg'"
			:src="src"
		/>
	</div>
</template>

<script lang="ts">
import store from "@/store";
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
	props: {
		src: {
			type: String,
			required: true,
		},
		size: {
			type: [String, Number],
		},
		bodyClass: String,
	},
	setup() {
		const state = reactive({
			loaded: false,
			defaultArtistCover: store.state.defaultMusicCover,
		});
		return {
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.albumBox {
	width: var(--boxSize);
	height: var(--boxSize);
	.disk {
		width: calc(var(--boxSize) - 10px);
		height: calc(var(--boxSize) - 10px);
		background-size: calc(76% * 2.46) calc(299% * 2.46); //380/1495
		background-position: 80.46% 44.961%;
		top: 50%;
		right: calc(var(--boxSize) * -26 / 150);
		transform: translate(0, -50%);
	}
	.edges {
		top: 50%;
		right: calc(var(--boxSize) * -4 / 150);
		transform: translate(0, -50%);
		> div {
			width: calc(var(--boxSize) * 65 / 150);
			height: calc(var(--boxSize) * 65 / 150);
			border: 1px solid rgb(112, 112, 112);
		}
	}
	.previewCover {
		z-index: 1;
		width: var(--boxSize);
		height: var(--boxSize);
	}
	.albumCover {
		z-index: 2;
		width: var(--boxSize);
		height: var(--boxSize);
		transition: opacity ease-in-out 0.4s;
	}
}
</style>
